<template>
  <div class="dashboard-container">
    <Card title="用户页面">
    <!-- 头部 -->
    <Form inline style="margin-top: 50px; margin-left: 40px">
      <FormItem>
        <Input v-model="page.username" placeholder="请输入用户名" style="width: 300px" />
      </FormItem>
      <FormItem>
        <Button type="primary"  shape="circle" icon="ios-search" @click="getList"  >搜索</Button>
      </FormItem>
      <FormItem>
        <Button type="primary" shape="circle" @click="set">重置</Button>
      </FormItem>
    </Form>
    <!-- 新增按钮 -->
    <div style="text-align: right"><Button style="margin-right:40px" type="primary" shape="circle" icon="md-brush" @click="edit">新增用户</Button></div>
     <Alert class="bcolor padd" style="margin-top:20px"><Icon type="ios-bug-outline"  style="margin-right:10px;" />总共有{{total}}条数据</Alert>
    <!-- 内容 -->
    <Table class="margin" border :columns="columns" :data="data">
      <template slot-scope="{ row,index}" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="edit1(row.id)">编辑</Button>
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template></Table
    >

    <!-- 页码 -->
    <Page  class="page" :total="total"
    show-elevator show-sizer :current.sync="page.page"
    :page-size="page.pagesize"
    @on-change="change" @on-page-size-change="sizeChange" />

 <!-- 新增用户 -->
    <Modal v-model="modal1" title="新增用户" width="40" >
      <Form label-position="left" :label-width="100" :model="editUser" :rules="rules" ref="formCustom" >
        <FormItem label="用户名" prop="username">
          <Input type="text" v-model="editUser.username" placeholder="用户名" />
        </FormItem>
        <FormItem label="邮箱" prop="email">
          <Input type="text" v-model="editUser.email" placeholder="邮箱" />
        </FormItem>
        <FormItem label="密码" prop="password">
          <Input type="password" v-model="editUser.password" placeholder="密码" />
        </FormItem>
        <FormItem label="角色">
          <Input type="text" v-model="editUser.role" />
        </FormItem>
        <FormItem label="权限组名称">
           <Select v-model="editUser.permission_group_id" style="width:200px">
              <Option v-for="item in pData" :value="item.id" :key="item.id">{{item.title}}</Option>
          </Select>
        </FormItem>
        <FormItem label="联系电话" prop="phone">
          <Input type="text" v-model="editUser.phone" />
        </FormItem>
        <FormItem label="介绍">
          <Input type="textarea" v-model="editUser.introduction" placeholder="请输入" />
        </FormItem>
      </Form>
      <div slot="footer" style="padding-right:20px">
          <Button type="primary" shape="circle" @click="btnOk" >确定</Button>
          <Button shape="circle" @click="btnCancel">取消</Button>
      </div>
    </Modal>
<!-- 编辑用户 -->
   <Modal v-model="modal" title="新增用户" width="40" >
      <Form label-position="left" :label-width="100" :model="editUser" :rules="rules" ref="formCustom1" >
        <FormItem label="用户名" prop="username">
          <Input type="text" v-model="editUser.username" placeholder="用户名" />
        </FormItem>
        <FormItem label="邮箱" prop="email">
          <Input type="text" v-model="editUser.email" placeholder="邮箱" />
        </FormItem>

        <FormItem label="角色">
          <Input type="text" v-model="editUser.role" />
        </FormItem>
        <FormItem label="权限组名称">
           <Select v-model="editUser.permission_group_id" style="width:200px">
              <Option v-for="item in pData" :value="item.id" :key="item.id">{{item.title}}</Option>
          </Select>
        </FormItem>
        <FormItem label="联系电话" prop="phone">
          <Input type="text" v-model="editUser.phone" />
        </FormItem>
        <FormItem label="介绍">
          <Input type="textarea" v-model="editUser.introduction" placeholder="请输入" />
        </FormItem>
      </Form>
      <div  slot="footer" style="padding-right:20px">
          <Button type="primary" shape="circle" @click="btnOk1" >确定</Button>
          <Button shape="circle" @click="btnCancel">取消</Button>
      </div>
    </Modal>
    </Card>
  </div>
</template>

<script>
import { list, remove, add, detail, update } from '@/api/base/users'
import { list as plist } from '@/api/base/permissions.js'
export default {
  data () {
    const vusername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('用户名不能为空'))
      }
      callback()
    }
    const vemail = (rule, value, callback) => {
      const rule1 = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (value === '') {
        callback(new Error('邮箱不能为空'))
      } else if (rule1.test(value)) {
        callback()
      } else {
        callback(new Error('格式错误,如90203918@qq.com或nbilly@126.com'))
      }
    }
    const vword = (rule, value, callback) => {
      const rule2 = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/
      if (value === '') {
        callback(new Error('密码不能为空'))
      } else if (rule2.test(value)) {
        callback()
      } else {
        callback(new Error('至少6位,包含1个小写一个大写一个中文字符'))
      }
    }
    const vphone = (rule, value, callback) => {
      const rule3 = /^1[3|4|5|6|7|8][0-9]{9}$/
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else if (rule3.test(value)) {
        callback()
      } else {
        callback(new Error('第一位手机号为1,第二位3-8,手机号长度为11位'))
      }
    }
    return {

      total: '',
      ids: '',
      columns: [
        {
          title: '序号',
          key: 'id',
          align: 'center'
        },
        {
          title: '邮箱',
          key: 'email',
          align: 'center'
        },
        {
          title: '联系电话',
          key: 'phone',
          align: 'center'
        },
        {
          title: '用户名',
          key: 'username',
          align: 'center'
        },
        {
          title: '权限组名称',
          key: 'permission_group_title',
          align: 'center'
        },
        {
          title: '角色',
          key: 'role',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      page: {
        page: 1,
        pagesize: 20,
        username: ''

      },
      modal1: false,
      modal: false,
      editUser: {

        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: '',
        introduction: ''
      },

      rules: {
        username: [
          { validator: vusername, trigger: 'blur' }
        ],
        email: [{ validator: vemail, trigger: 'blur' }],
        password: [
          { validator: vword, trigger: 'blur' }
        ],
        phone: [
          { validator: vphone, trigger: 'blur' }
        ]
      },
      data: [],
      pData: []
    }
  },
  methods: {
    sizeChange (size) {
      this.page.pagesize = size
      this.getList()
    },
    change () {
      this.getList()
    },

    // 获取用户列表
    set () {
      this.page = {}
      this.getList()
    },
    async getList () {
      // const result = await list()

      const result = await list(this.page)
      console.log(result)
      this.total = result.data.counts

      this.data = result.data.list
    },
    // 删除用户
    async remove (index) {
      // console.log(row)
      this.$confirm('确定删除该用户吗')
        .then(() => {
          return remove({ id: this.data[index].id })
        })
        .then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
    },
    // 获取权限列表
    async getPlist () {
      const result = await plist()
      // console.log(result)
      this.pData = result.data.list
    },
    // 用户详情
    async geted () {
      // const result = await detail()
      // console.log(result)
    },
    // 点击新增弹层
    edit () {
      this.modal1 = true
    },
    // async a () {
    //   const a = await update(this.editUser)
    //   console.log(a)
    // },
    // 点击确定添加用户
    btnOk () {
      this.$refs.formCustom.validate((valid) => {
        if (valid) {
          add(this.editUser)
          this.$message.success('添加成功')
          this.getList()
          this.modal1 = false
          this.editUser = {
            username: '',
            email: '',
            password: '',
            role: '',
            permission_group_id: '',
            phone: '',
            introduction: ''
          }
        } else {
          this.$Message.error('请输入内容')
        }
      })
    },
    // 点击编辑
    async  edit1 (id) {
      this.modal = true
      this.ids = id
      const res = (await detail({ id })).data

      this.editUser = {
        username: res.username,
        email: res.email,
        role: res.role,
        permission_group_id: res.permission_group_id,
        phone: res.phone,
        id: res.id
      }
    },

    // 编辑
    async btnOk1 () {
      this.$refs.formCustom1.validate((valid) => {
        if (valid) {
          update({ id: this.ids, ...this.editUser })
          this.$Message.success('编辑成功')
          this.getList()
          this.modal = false
        } else {

        }
      })
    },
    btnCancel () {
      this.editUser = {
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: '',
        introduction: ''
      }
      this.modal1 = false
      this.modal = false
    }

  },
  created () {
    this.getList()
    this.getPlist()
  }
}
</script>

<style lang="scss" scoped>
.padd{
margin-left: 40px;
}
.margin{
  margin-bottom: 20px ;
margin-left: 40px;
  margin-right: 40px;

}
.bcolor{
  width: 55%;
  background-color:#fff;
  border:none;

}
.page{padding: 20px;text-align: center;}
</style>
